<template>
	<view class="content">
		<z-paging ref="paging" v-model="electric" @query="get_electric_list" :default-page-size="20">
			<template slot="top">
				<view class="bartop"></view>
				<view class="cu-bar">
					<view class="action">
						<text class="cuIcon-back text-gray" @tap="goBack"></text> 返回
					</view>
					<view class="text-lg text-bold">
						当班电量
					</view>
					<view class="action">
						<text class="text-lg" style="color: #13227a;" @tap="addElectric">添加</text>
					</view>
				</view>
			</template>

			<view v-if="electric.length>0" class="cu-list menu">
				<view v-for="(item,index) in electric" :key="index" @click="updateElectric(item)" class="cu-item"
					:style="index%2==0?'background:#fff':'background:#dedede' ">
					<view class="item">
						<text>{{item.timeString}}</text>
						<text>日期</text>
					</view>
					<view class="item">
						<text>{{item.sElectricity}}</text>
						<text>上班电量 </text>
					</view>
					<view class="item">
						<text>{{item.xElectricity}}</text>
						<text>下班电量</text>
					</view>
				</view>
			</view>

		</z-paging>
		<view class="cu-modal" :class="modalName=='Add'? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">当班电量</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<input placeholder="请输入上班电量" type="text" v-model="s_electricity">
				</view>
				<view class="padding-xl">
					<input placeholder="请输入下班电量" type="text" v-model="x_electricity">
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-purple" @tap="hideModal">取消</button>
						<button class="cu-btn bg-purple margin-left" @tap="confirmModal">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// "id": null, // id
				// "class": null, //班次
				// "order_id": null, //订单号
				// "product_id": null, //产品名称
				// "number": null, //机台编号
				// "unit": null, //单位
				// "material_id": null, //用料
				// "colour_id": null, //颜色/色粉
				// "order_number": null, //排产数量
				// "qualified_quantity": null, //生产合格数量
				// "working_hours": null, //实际生产工时
				// "scrapped_part": null, //残品数量
				// "operator": null, //操作工
				// "accumulate_number": null, //合格累计数量
				// "debugging_time": null, //换模调试时间
				// "change_material_time": null, // 换料烘料时间
				// "weight": null, //产品单重
				// "abnormal_time": null, //其他异常事件
				// "remarks": null, //备注
				electric: [],
				modalName: null,
				id: null,
				s_electricity: null,
				x_electricity: null
			}
		},
		methods: {

			onShow() {
				if (this.$refs.paging) {
					this.$refs.paging.reload()
				}
			},

			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			hideModal(e) {
				this.modalName = null
			},
			confirmModal(e) {
				if (!this.s_electricity) {
					uni.showToast({
						title: '请输入上班电量'
					});
					return
				}
				if (!this.x_electricity) {
					uni.showToast({
						title: '请输入下班电量'
					});
					return
				}
				this.hideModal()

				let param = {
					"s_electricity": parseInt(this.s_electricity),
					"x_electricity": parseInt(this.x_electricity),
				}
				if (this.id) {
					param.id = this.id

					this.$Request.post(this.$httpApi.electric.update, param).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: "修改成功",
								icon: 'none',
								duration: 2000
							});
							this.$refs.paging.reload()
						}
					})
				} else {
					var timestamp = Date.parse(new Date());
					param.time = timestamp / 1000

					this.$Request.post(this.$httpApi.electric.add, param).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: "添加成功",
								icon: 'none',
								duration: 2000
							});
							this.$refs.paging.reload()
						}
					})
				}

			},
			get_electric_list(pageNo, pageSize) {
				this.$Request.post(this.$httpApi.electric.electricList + "?page=" + pageNo + "&size=" + pageSize).then(
					res => {
						if (res.code != 200) {
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							});
						} else {
							console.log(res)
							try {
								uni.hideLoading()
								this.$refs.paging.complete(res.data.list)
							} catch (e) {
								this.$refs.paging.complete([])
								uni.hideLoading()
							}
						}
					})
			},

			showDetail(item) {
				uni.navigateTo({
					url: '/pages/workshop_director/form_detail/form_detail?id=' + item.id + "&operator=" + item
						.operatorName +
						"&productName=" + item.productName
				})
			},

			addElectric() {
				this.id = null
				this.s_electricity = null
				this.x_electricity = null
				this.modalName = "Add"

			},
			updateElectric(item) {
				this.id = item.id
				this.s_electricity = item.sElectricity
				this.x_electricity = item.xElectricity
				this.modalName = "Add"

			}
		}
	}
</script>

<style>
	.cu-list.menu>.cu-item {
		display: flex;
	}

	.item {
		width: 100%;
		flex-direction: column;
		display: flex;
		align-items: center;
	}

	.item-img {
		/* width: 50rpx; */
		height: 80rpx;
		position: absolute;
		right: 0;
		top: 15rpx
	}
</style>
